<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>日报表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
        .element-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .content-container .tab-menu {
            padding: 0px 20px;
            background: #F5F7FA;
            border-bottom: solid 1px #e6e6e6;
        }
        .content-container .tab-menu .title {
            font-size: 22px;
            color: #000000;
            line-height: 22px;
            margin-right: 20px;
            line-height: 46px;
        }
        .content-container .operation-menu {
            border-bottom: 1px solid #DCDFE6;
        }
        .content-container .operation-menu .operation-menu__button {
            padding: 10px 20px;
        }
        .content-container .operation-menu .operation-menu__search {
            padding: 10px 20px 0px 20px;
        }
        .content-container .operation-menu .operation-menu__search .search-condition .search-item {
            float: left;
            display: inline-block;
            margin: 0px 20px 10px 0px;
        }

        .content-container .operation-menu .operation-menu__search .search-condition .search-item .label {
            font-size: 14px;
            color: #000000;
            letter-spacing: 0;
            line-height: 16px;
            margin-right: 10px;
            vertical-align: middle;
        }

        .content-container .operation-menu .operation-menu__search .search-condition .search-item .search-input {
            display: inline-block;
        }

        .content-container .content-nav {
            background: #F5F7FA;
            height: 15px;
        }
        .content-container .muti-table {
            background: #FFFFFF;
        }

        .content-container .muti-table .table-row {
            padding-left: 20px;
            border-bottom: solid 1px #e6e6e6;
            word-break: break-all;
        }

        .content-container .muti-table .table-row .muti-table__table-cell {
            padding: 0px 10px;
            box-sizing: border-box;
        }

        .content-container .muti-table .table-row__sep {
            padding: 8px 0px;
        }

        .content-container .muti-table .table-row__left .muti-table__table-cell {
            line-height: 100%
        }

        .content-container .muti-table .table-th {
            font-size: 14px;
            color: #909399;
            letter-spacing: 0;
            text-align: left;
            line-height: 16px;
            font-weight: bold;
            padding: 0px 0px 0px 20px;
        }

        .content-container .muti-table .content-row {
            font-size: 14px;
            color: #606266;
            letter-spacing: 0;
            text-align: left;
            line-height: 14px;
        }

        .content-container .muti-table .content-row:hover {
            background: #eeeeee;
        }

        .content-container .muti-table .table-row__left {
            min-width: 380px;
            width: 25%
        }

        .content-container .muti-table .table-row .user-date-cell {
            width: 100px;
            padding-left: 0px;
            text-align: center;
            line-height: 48px;
        }

        .content-container .muti-table .table-row .user-seller-type-cell {
            width: 200px;
            padding-left: 0px;
            text-align: center;
            line-height: 48px;
        }

        .content-container .muti-table .table-row .user-seller-name-cell {
            width: 250px;
            padding-left: 0px;
            text-align: center;
            line-height: 48px;
        }

        .content-container .muti-table .table-row .platform-order-sum-cell {
            width: 250px;
            padding-left: 0px;
            text-align: center;
            line-height: 48px;
        }

        .content-container .muti-table .table-row .platform-aggregate-amount-cell {
            width: 250px;
            padding-left: 0px;
            text-align: center;
            line-height: 48px;
        }
    </style>
</head>

<body style="display: none;">
    <div id="app" class="container" flex>
        <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
            <div class="content-container" flex-box=1 flex="dir:top">
            <div flex-box="0" class="tab-menu" flex="cross:center">
                <div class="title" flex-box=0>日报表（悦健康）</div>
            </div>
            <div flex-box="1">
                <div class="operation-menu">
                    <div class="operation-menu__button" flex>
                        <div flex-box="0">
                            <div class="operation-menu__search" flex="cross:top">
                                <div flex-box="0" class="search-condition">
                                    <div class="search-item">
                                        <span class="label">日期</span>
                                        <div class="search-input">
                                            <el-date-picker v-model="enterDate" type="date" placeholder="选择日期" size="small">
                                            </el-date-picker>
                                        </div>
                                    </div>
                                    <div class="search-item">
                                        <span class="label">商家类别</span>
                                        <div class="search-input" style="width: 100px;">
                                            <el-select v-model="value" placeholder="未选择" size="small">
                                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                    <div class="search-item">
                                        <span class="label">商家名称</span>
                                        <div class="search-input">
                                            <el-input v-model="username" placeholder="请输入名称" size="small"></el-input>
                                        </div>
                                    </div>
                                </div>
                                <div flex-box="0">
                                    <el-button type="primary" size="small">筛选</el-button>
                                </div>
                            </div>
                        </div>
                        <div flex-box="0" class="element-center">
                            <el-button type="primary" size="small" icon="el-icon-refresh" plain>刷新</el-button>
                            <el-button type="primary" size="small" icon="el-icon-download" plain>导出</el-button>
                        </div>
                    </div>
                </div>
                <div class="content-nav"></div>
                <div class="muti-table">
                    <div class="table-th table-row" flex>
                        <div class="table-row__sep" flex>
                            <div flex-box="0" class="muti-table__table-cell user-date-cell">日期</div>
                            <div flex-box="0" class="muti-table__table-cell user-seller-type-cell">商家类别</div>
                            <div flex-box="0" class="muti-table__table-cell user-seller-name-cell">商家名称</div>
                            <div flex-box="0" class="muti-table__table-cell platform-order-sum-cell">平台订单总数（有效订单数）</div>
                            <div flex-box="0" class="muti-table__table-cell platform-aggregate-amount-cell">平台订单总金额（有效订单）</div>
                        </div>
                    </div>
                    <div class="content-row table-row" flex>
                        <div class="table-row__sep" flex>
                            <div flex-box="0" class="muti-table__table-cell user-date-cell">2018/05/21</div>
                            <div flex-box="0" class="muti-table__table-cell user-seller-type-cell">产康</div>
                            <div flex-box="0" class="muti-table__table-cell user-seller-name-cell">瑜曼伊人-海珠店</div>
                            <div flex-box="0" class="muti-table__table-cell platform-order-sum-cell">4999</div>
                            <div flex-box="0" class="muti-table__table-cell platform-aggregate-amount-cell">538290.00</div>
                        </div>
                    </div>
                    <div class="content-row table-row" flex>
                        <div class="table-row__sep" flex>
                            <div flex-box="0" class="muti-table__table-cell user-date-cell">2018/05/21</div>
                            <div flex-box="0" class="muti-table__table-cell user-seller-type-cell">产康</div>
                            <div flex-box="0" class="muti-table__table-cell user-seller-name-cell">瑜曼伊人-海珠店</div>
                            <div flex-box="0" class="muti-table__table-cell platform-order-sum-cell">4999</div>
                            <div flex-box="0" class="muti-table__table-cell platform-aggregate-amount-cell">538290.00</div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </el-admin-menu>
    </div>
</body>
<script src="common/config.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')</script>
<script src="testdata/test_data.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.comon.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                enterDate: '',
                value: '',
                username: '',
                visible: false,
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                // 来自test_data.js
                menus: menus,
                // 来自test_data.js
                userDetail: userDetail
            }
        },
        methods: {
            logout() {
                window.location.href = 'login.html';
            }
        },
        mounted() {
            document.querySelector('body').style.display = 'block';
        }
    });

</script>

</html>
